<!--
 * @Author: wu07 1732042133@qq.com
 * @Date: 2023-02-01 17:39:05
 * @LastEditors: wu07 1732042133@qq.com
 * @LastEditTime: 2023-02-01 18:57:10
 * @FilePath: \recruitAPP\recruitApp\recruitApp\src\pages\user\Me\Add.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 视图层 -->
<template>
  <van-nav-bar
    title="添加反馈"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="result"
        is-link
        readonly
        name="picker"
        placeholder="选择反馈类型"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-picker
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
        v-model="message"
        name="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="300"
        placeholder="请输入反馈信息"
        show-word-limit
      />
      <span class="sp">上传图片(最多6张)</span>
      <van-field name="uploader">
        <template #input>
          <van-uploader v-model="value" :max-count="6" />
        </template>
      </van-field>
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>
<!-- 逻辑层 -->
<script setup>
import { ref } from "vue";
// 导入useRouter方法
import { useRouter } from "vue-router";
const router = useRouter();
// 返回上一页
const onClickLeft = () => {
  router.go(-1);
};
const onSubmit = (values) => {
  console.log("submit", values);
};
const result = ref("");
const showPicker = ref(false);
const columns = [
  { text: "商品相关", value: "Hangzhou" },
  { text: "虚假信息", value: "Ningbo" },
  { text: "客户服务", value: "Wenzhou" },
  { text: "优惠活动", value: "Shaoxing" },
  { text: "产品体验", value: "Huzhou" },
];

const onConfirm = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text;
  showPicker.value = false;
};
const value = ref([{ url: "" }]);
const message = ref("");
</script>
<!-- 样式层 -->
<style  scoped>
.sp {
  margin-left: 3.6667vw;
  font-size: 3.4667vw;
}
</style>